<template>
  <div class="interface">
    <dl class="dialog">
      <dt class="dialog-boxes">
        <div class="dialog-boxes__dialogue">
          <ul class="dialog-ul">
            <li class="dialog-ul__li" v-for="(item, index) in dialogbox" :key="index"><span>{{item}}</span></li>
          </ul>
        </div>
        <div class="dialog-boxes__text">
          <textarea class="dialog-boxes__textarea" style="height:160px"></textarea>
          <div class="dialog-boxes__btn">
            <el-button type="primary">主要按钮</el-button>
          </div>
        </div>
      </dt>
      <dd class="dialog-figure"></dd>
    </dl>
  </div>
</template>
<script>
export default {
  async asyncData ({ app }) {
    return {}
  },
  data () {
    return {
      ws: null,
      dialogbox: []
    }
  },
  methods: {

  },
  mounted () {
    const ws = new WebSocket('ws://47.52.97.41:9502/')
    // 连接建立时触发
    ws.onopen = () => {
      console.log('open')
      ws.send('你是666')
    }
    // 客户端接收服务端数据时触发
    ws.onmessage = (evt) => {
      console.log('evt')
      // console.log(evt)
      const datamsg = JSON.parse(evt.data)
      this.dialogbox.push(datamsg.msg)
    }
    // 连接关闭时触发
    ws.onclose = function (evt) {
      console.log('WebSocket--Closed!')
    }
    // 通信发生错误时触发
    ws.onerror = function (evt) {
      console.log('WebSocketError!')
    }
    this.ws = ws
  },
  created () {
  }
}
</script>
<style lang="scss" scoped>
.interface{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dialog{
  width: 1000px;
  height: 600px;
  border: 1px solid #999;
  display: flex;
  &-boxes{
    box-sizing: border-box;
    width: 800px;
    height: 100%;
    &__dialogue{
      height: 400px;
    }
    &__text{
      height: 200px;
      border-top: 1px solid #999;
    }
    &__textarea{
      width: 100%;
      height: 180px;
      outline: none;
      border: none;
      padding: 3px;
      line-height: 1.6;
    }
    &__btn{
      display: flex;
      justify-content: flex-end;
      padding-right: 10px;
    }
  }
  &-figure{
    box-sizing: border-box;
    width: 200px;
    height: 100%;
    border-left: 1px solid #999;
  }
  &-ul{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    &__li{
      list-style: none;
      padding: 5px;
      color: #fff;
      > span{
        display: inline-block;
        padding: 4px 10px;
        border-radius: 5px;
        background-color: aqua;
      }

    }
  }
}
</style>
